<template>
	<view class="container">
		<view class="fiexd-top">
			<view class="header">
				<view class="arrow" @tap="$back()"><image src="../../static/images/arrow_left.png" mode="aspectFit"></image></view>
				<view class="text f36 cfff">货品信息</view>
				<view class="save f36 cfff" @tap="getGoodsAdd">保存</view>
			</view>
		</view>
		<view style="height: 130upx;"></view>

		<view class="good-info">
			<view class="upload" @tap="UploadImg()">
				<view class="pic">
					<image src="../../static/images/upload-img.png" mode="aspectFit" v-if="pictureBox.length < 9"></image>
					<block v-for="(item, index) in ingList" :key="index"><image :src="item" mode=""></image></block>
				</view>
				<view class="text f36 c333">上传图片(单张小于2MB)</view>
			</view>
			<view class="good-item">
				<view class="left"><view class="name f30 c333">编码</view></view>
				<view class="right">
					<view class="text f30 c666">
						<input type="number" value="" v-model="goods_no" placeholder="编码唯一，保存后不能修改"/>
					<!-- 	{{ goods_no != '' ? goods_no : '编码唯一，保存后不能修改' }} -->
						<image src="../../static/images/202010130319.png" mode="aspectFit"  @tap="scan()"></image>
					</view>
				</view>
			</view>
			<view class="good-item">
				<view class="left"><view class="name f30 c333">名称</view></view>
				<view class="right"><input type="text" placeholder-style="color:#666" value="必填" placeholder="必填" v-model="name" /></view>
			</view>
		</view>

		<view class="good-box">
			<view class="good-item" @tap="openGuige()">
				<view class="name f30 c333">规格</view>
				<view class="right">
					<!-- {{spec!==''? spec :'无规格'}} -->
					<view class="text f30 c666">
						<view v-for="(val, index) in specList" :key="index">
							{{ val.name }}:
							<block v-for="(ite, i) in val.values" :key="i">{{ ite }}/</block>
						</view>
					</view>
					<view class="arrow"><image src="../../static/images/arrow_right.png" mode="aspectFit"></image></view>
				</view>
			</view>
			<view class="good-item" @tap="$open('./price')">
				<view class="name f30 c333">价格</view>
				<view class="right">
					<view class="text f30 c666">{{ newlist.length != 0 ? (newlist[0].cost_price != '' ? '已填写' : '必填') : '已填写' }}</view>
					<view class="arrow"><image src="../../static/images/arrow_right.png" mode="aspectFit"></image></view>
				</view>
			</view>
			<view class="good-item" @tap="$open('./classification')">
				<view class="name f30 c333">货品分类</view>
				<view class="right">
					<view class="text f30 c666">{{ category_name != '' ? category_name : '选填' }}</view>
					<view class="arrow"><image src="../../static/images/arrow_right.png" mode="aspectFit"></image></view>
				</view>
			</view>
			<view class="good-item" @tap="$open('./description')">
				<view class="name f30 c333">货品描述</view>
				<view class="right">
					<view class="text f30 c666">{{ description != '' ? '已填写' : '选填' }}</view>
					<view class="arrow"><image src="../../static/images/arrow_right.png" mode="aspectFit"></image></view>
				</view>
			</view>
			<!-- 			<view class="good-item">
				<view class="name f30 c333">货品属性</view>
				<view class="right">
					<view class="text f30 c666">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{ array[index] }}</view>
						</picker>
					</view>
					<view class="arrow"><image src="../../static/images/arrow_right.png" mode="aspectFit"></image></view>
				</view>
			</view> -->
		</view>

		<!-- 库存 -->
		<view class="stockBox">
			<view class="stock-item">
				<view class="left"><view class="name f30 c333">库存预警</view></view>
				<view class="right"><switch checked color="#259AF6" /></view>
			</view>
			<view class="stock-item">
				<view class="left"><view class="name f30 c333">最低安全库存</view></view>
				<view class="right"><input type="number" maxlength="4" placeholder="0" v-model="minStock" /></view>
			</view>
			<view class="stock-item">
				<view class="left"><view class="name f30 c333">最高安全库存</view></view>
				<view class="right"><input type="number" maxlength="4" placeholder="0" v-model="maxStock" /></view>
			</view>
			<view class="stock-item">
				<view class="left"><view class="name f26 c666">当货品库存数量在安全库存之外时会进行预警</view></view>
			</view>
		</view>

		<!-- 开关选择器 -->
		<view class="switchBox">
			<view class="switch-item">
				<view class="left">
					<view class="name f30 c333">隐藏商城货品销售价</view>
					<view class="text f26 c666">用于隐藏货品销售价格</view>
				</view>
				<view class="right"><switch color="#259AF6" @change="switchPrice" /></view>
			</view>
			<view class="switch-item">
				<view class="left">
					<view class="name f30 c333">隐藏商城货品库存</view>
					<view class="text f26 c666">用于隐藏货品销售库存</view>
				</view>
				<view class="right"><switch color="#259AF6" @change="switchSales" /></view>
			</view>
			<view class="switch-item">
				<view class="left">
					<view class="name f30 c333">隐藏商城货品库存</view>
					<view class="text f26 c666">用于隐藏货品销售库存</view>
				</view>
				<view class="right"><switch color="#259AF6" @change="switchStore" /></view>
			</view>
		</view>
	
	   <!-- 删除货品 -->
	   <view class="deleteBtn" @tap="deleteBtn" v-if="goods_id!=undefined">
		   <view class="text">删除货品</view>
	   </view>
	
	</view>
</template>

<script>
	import { mapState } from 'vuex'
export default {
	data() {
		return {
			array: ['选填', '新品', '店长推荐', '预售'],
			index: 0,
			pictureBox: [],
			imgUrl: '',
			goods_no: '', //编码
			name: '', //商品名称
			minStock: '', //最小库存告警数量
			maxStock: '', //最大库存告警数量
			description: '', //描述
			min_price: '', //所有规格的最小价格
			max_price: '', //所有规格的最大价格
			price: '', //价格
			spec: [],
			newlist: [],
			specList: [],
			productList:[],
			sellList:[],
			costList:[],
			goods_id:'' //修改和删除时必传
		};
	},
	onShow() {
	
		this.description = uni.getStorageSync('description') || '';
		this.specList = uni.getStorageSync('specList');
		 // console.log(this.specList);
	this.specList.forEach(item=>{
	 delete	item.isok
	})
	// console.log(this.specList);
	
		
		// 如果规格是空的,才会用规格页面的数据进行初始化
		if (this.newlist.length == 0 && uni.getStorageSync('specList') != '') {
			// 对规格页面添加的数组重构
			let guigelist = uni.getStorageSync('specList');
			guigelist[0].values.forEach(item => {
				guigelist[1].values.forEach(item02 => {
					this.newlist.push({
						spec_data: [item, item02],
						sell_price: '',
						cost_price: ''
					});
				});
			});
			uni.setStorageSync('priceList', this.newlist);
		} else if (uni.getStorageSync('specList') != '') {
			// 如果已经初始化过了,那就直接取价格页面数据
			this.newlist = uni.getStorageSync('priceList');
		}
		
	
		//获取成本价最小值
	this.costList=[]
	this.newlist.forEach(item=>{
   this.costList.push(item.cost_price)
	})
	
	this.min_price=Math.min.apply(null,this.costList)

	console.log(Math.min.apply(null,this.costList))

	
	//获取销售价最大值
	
	this.sellList=[]
		this.newlist.forEach(item=>{
	this.sellList.push(item.sell_price)
		})
		this.max_price=Math.max.apply(null,this.sellList)
  console.log(Math.max.apply(null,this.sellList));

		
	},
	onLoad(option) {
		this.imgUrl = getApp().globalData.apiUrl;
		this.goods_id=option.goodId
	    // this.getEdit()
					this.goods_no = option.coding
					this.name = option.name
		
	},
	watch:{
		goods_no(){
			return uni.setStorageSync('goods_no',this.goods_no)
		},
		name(){
			uni.setStorageSync('name',this.name)
		}
	},
	computed:{
		...mapState([
			'ingList'
		])
	},
	methods: {
		// 打开规格页面,清空值
		openGuige() {
			let that = this;
			uni.showModal({
				title: '警告',
				content: '重新设置规格后需重新设置价格!',
				success: res => {
					if (res.confirm) {
						that.newlist = [];
						that.$open('./selection');
					}
				}
			});
		},
		bindPickerChange(e) {
			this.index = e.target.value;
		},

		scan() {
			let that = this;
			uni.scanCode({
				scanType: 'barCode',
				success: function(res) {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
					that.goods_no = res.result;
				}
			});
		},
		//商品添加

		getGoodsAdd() {
			let that = this;
			
			if(that.name==''){
				that.$sToast('商品名称不能为空');
			}
			
			if (that.newlist[0].cost_price == '') {
				that.$sToast('价格必填');
			}
			that.$ajax('api/v2.goods/add', {
				category_id: uni.getStorageSync('id'),
				category_name: uni.getStorageSync('name'),
				cover: uni.getStorageSync('imaglsit'),
				goods_no: that.goods_no,
				title: that.name,
				product_list: JSON.stringify(that.newlist),
				spec: JSON.stringify(that.specList),
				min_price: that.min_price,
				max_price: that.max_price,
				description: that.description,
				min_stock_warn_num: that.minStock,
				max_stock_warn_num: that.maxStock,
				is_hidden_price: that.is_hidden_price == undefined ? '0' : that.is_hidden_price,
				is_hidden_sales_num: that.is_hidden_sales == undefined ? '0' : that.is_hidden_sales,
				is_hidden_store: that.is_hidden_store == undefined ? '0' : that.is_hidden_store
			})
				.then(res => {
					if (res.code == 1) {
						that.$sToast('添加成功');
						that.$open('../shop/index',1,1500)
						// uni.setStorageSync('specList','')
							that.$store.commit('GOOD_LIST','')
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		},

		// 商品图片上传
		UploadImg() {
			let that = this;
			uni.chooseImage({
				count: 9, //默认9
				sizeType: ['compressed'],
				success: function(res) {
					uni.showLoading({
						title: '全力上传中'
					});
					uni.uploadFile({
						url: getApp().globalData.apiurl + 'api/v1.goods/upload',
						filePath: res.tempFilePaths[0],
						name: 'file',
						formData: {
							act: 'direct',
							type: 'logo'
						},
						header: {
							token: uni.getStorageSync('userinfo').token
						},
						success: uploadFileRes => {
							uni.hideLoading();
							uni.showToast({
								title: '上传成功',
								icon: 'none'
							});
							// console.log(uploadFileRes);
							uploadFileRes = JSON.parse(uploadFileRes.data);
							that.pictureBox.push(uploadFileRes.result.result);
							uni.setStorageSync('imaglsit',that.pictureBox)
							that.$store.commit('GOOD_LIST',that.pictureBox)
							
						},
						fail: err => {
							console.log(err);
						}
					});
				}
			});
		},
		//商品修改
		
		getEdit(){
			let that=this;
			that.$ajax('api/v2.goods/edit',{
				category_id: that.category_id,
				category_name: that.category_name,
				goods_id:that.goods_id,
				cover: that.pictureBox,
				goods_no: 12355456,
				title: that.name,
				product_list: JSON.stringify(that.newlist),
				spec: JSON.stringify(that.specList),
				min_price: that.min_price,
				max_price: that.max_price,
				description: that.description,
				min_stock_warn_num: that.minStock,
				max_stock_warn_num: that.maxStock,
				is_hidden_price: that.is_hidden_price == undefined ? '0' : that.is_hidden_price,
				is_hidden_sales_num: that.is_hidden_sales == undefined ? '0' : that.is_hidden_sales,
				is_hidden_store: that.is_hidden_store == undefined ? '0' : that.is_hidden_store
			}).then(res=>{
				console.log('212222')
				console.log(res.result);
				console.log('212222')
			}).catch(res=>{
				that.$sToast(res.message)
			})
		},
		//商品删除
		deleteBtn(){
			let that=this;
			uni.showModal({
			    title: '温馨提示',
			    content: '您确认要删除货品吗',
			    success: function (res) {
			        if (res.confirm) {
						that.$ajax('api/v2.goods/del',{
							goods_id:that.goods_id
						}).then(res=>{
							if(res.code==1){	
								that.$sToast('删除成功')
							}
						}).catch(res=>{
							that.$sToast(res.message)
						})
						that.$open('../shop/client',1,1500)
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
			
			
			
		},
		
		switchPrice(e) {
			console.log('switch1 发生 change 事件，携带值为', e.target.value);
			if (e.target.value == true) {
				this.is_hidden_price = 1;
			} else {
				this.is_hidden_price = 0;
			}
		},
		switchSales(e) {
			if (e.target.value == true) {
				this.is_hidden_sales = 1;
			} else {
				this.is_hidden_sales = 0;
			}
		},
		switchStore(e) {
			if (e.target.value == true) {
				this.is_hidden_store = 1;
			} else {
				this.is_hidden_store = 0;
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}

.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background-color: #ffffff;
}

.top_view {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	background-color: #fff;
	top: 0;
	z-index: 999;
}

.fiexd-top {
	width: 100%;
	position: fixed;
	z-index: 99999;
}

.header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: #249af6;
	padding: 60upx 30upx 20upx 30upx;

	.arrow {
		image {
			width: 22upx;
			height: 40upx;
		}
	}
}
.good-info {
	background-color: $white-background;
	padding: 30upx 0 35upx 0;
	margin-bottom: 20upx;
	.upload {
		padding: 10upx 0 35upx 0;
		border-bottom: 2upx #eeeeee solid;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 30upx;
		.pic {
			margin-bottom: 45upx;
			image {
				width: 65upx;
				height: 65upx;
				margin-right: 15upx;
			}
		}
	}
	.good-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 2upx #eeeeee solid;
		padding: 0 30upx 35upx 30upx;
		margin-bottom: 25upx;
		align-items: center;
		.right {
			width: 70%;
			display: flex;
			flex-direction: row;
			align-items: center;
			text-align: right;
			.text{
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			image {
				width: 44upx;
				height: 44upx;
				margin-left: 30upx;
				vertical-align: middle;
			}
			input {
				width: 100%;
				box-sizing: border-box;
				font-size: 30upx;
				color: #666;
			}
		}
	}
}
.good-box {
	.good-item {
		background-color: $white-background;
		padding: 30upx 30upx 35upx 30upx;
		border-bottom: 2upx #eeeeee solid;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		&:nth-child(2) {
			margin-bottom: 20upx;
		}
		.right {
			display: flex;
			flex-direction: row;
		
			.arrow {
				image {
					width: 18upx;
					height: 33upx;
					margin: 0 0 8upx 20upx;
				}
			}
			
		}
	}
}

// 库存

.stockBox {
	padding: 35upx 20upx;
	background-color: $white-background;
	margin-top: 20upx;
	.stock-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 50upx;
		line-height: 50upx;
		margin-bottom: 20upx;
		.right {
			switch {
				transform: scale(0.7);
			}
			input {
				font-size: 30upx;
				color: #333;
				width: 80upx;
				height: 35upx;
				padding: 0 10upx;
				line-height: 35upx;
				border: 2upx #ddd solid;
				border-radius: 5upx;
				text-align: center;
				margin-right: 10upx;
			}
		}
	}
}

// 开关选择器
.switchBox {
	margin: 20upx 0 180upx 0;
	.switch-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: $white-background;
		padding: 30upx 20upx 30upx 30upx;
		border-bottom: 1upx #eeeeee solid;
		padding-bottom: 20upx;
		.right {
			switch {
				transform: scale(0.7);
			}
		}
	}
}
.deleteBtn{
	height: 110upx;
	line-height: 110upx;
	background-color: $white-background;
	.text{
		font-size: 30upx;
		text-align: center;
		color: #F64444;
	}
}
</style>
